<template>
  <div>
    <div class="secondary-notification">
      <t-tabs v-model="tabValue">
        <t-tab-panel
          v-for="(tab, tabIndex) in TAB_LIST"
          :key="tabIndex"
          :value="tab.value"
          :label="tab.label"
        >
          <t-list v-if="msgDataList.length > 0" class="secondary-msg-list" :split="true">
            <t-list-item v-for="(item, index) in msgDataList" :key="index">
              <p
                :class="['content', { unread: item.status == '0' ? true : false }]"
                @click="
                  item.status == '0' ? setReadStatus(item, '1') : setReadStatus(item, '0')
                "
              >
                <t-tag
                  size="small"
                  :theme="NOTIFICATION_TYPES[item.quality]"
                  variant="light"
                >
                  {{ noticeType[item.type] }}
                </t-tag>
                {{ item.notice }}
              </p>
              <template #action>
                <span class="msg-date">{{ item.createTime }}</span>

                <div class="msg-action">
                  <t-tooltip
                    class="set-read-icon"
                    :overlay-style="{ margin: '6px' }"
                    :content="item.status == '0' ? '设为已读' : '设为未读'"
                  >
                    <span
                      class="msg-action-icon"
                      @click="
                        item.status == '0'
                          ? setReadStatus(item, '1')
                          : setReadStatus(item, '0')
                      "
                    >
                      <t-icon v-if="item.status == '1'" name="queue" size="16px" />
                      <t-icon v-else name="chat" />
                    </span>
                  </t-tooltip>
                  <t-tooltip content="删除通知" :overlay-style="{ margin: '6px' }">
                    <span @click="handleClickDeleteBtn(item)">
                      <t-icon name="delete" size="16px" />
                    </span>
                  </t-tooltip>
                </div>
              </template>
            </t-list-item>
          </t-list>
          <div v-else class="secondary-msg-list__empty-list">
            <empty-icon></empty-icon>
            <p>暂无通知</p>
          </div>
        </t-tab-panel>
      </t-tabs>
    </div>
    <t-dialog
      v-model:visible="visible"
      header="删除通知"
      :body="`确认删除通知：${selectedItem && selectedItem.notice}吗？`"
      :on-confirm="deleteMsg"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "DetailSecondary",
};
</script>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { NOTIFICATION_TYPES } from "@/constants";
import { NotificationItem } from "@/interface";
import EmptyIcon from "@/assets/assets-empty.svg?component";
import { useNotificationStore } from "@/store";
import { dicVals } from "@/api/common";
import { updateAPI, delAPI } from "@/api/wedding/noticeInfo";
import { ElMessage } from "element-plus";

const TAB_LIST = [
  {
    label: "全部通知",
    value: "msgData",
  },
  {
    label: "未读通知",
    value: "unreadMsg",
  },
  {
    label: "已读通知",
    value: "readMsg",
  },
];

const tabValue = ref("msgData");

const visible = ref(false);
const selectedItem = ref<NotificationItem>();

const store = useNotificationStore();
const { msgData, unreadMsg, readMsg } = storeToRefs(store);

const msgDataList = computed(() => {
  if (tabValue.value === "msgData") return msgData.value;
  if (tabValue.value === "unreadMsg") return unreadMsg.value;
  if (tabValue.value === "readMsg") return readMsg.value;
  return [];
});

const handleClickDeleteBtn = (item: NotificationItem) => {
  visible.value = true;
  selectedItem.value = item;
};

const setReadStatus = (item: NotificationItem, status: string) => {
  item.status = status;
  updateAPI(item).then((res) => {
    console.log("[ updateAPI ] >", res);
    ElMessage({
      type: "success",
      message: "操作成功",
    });
  });
};

const deleteMsg = () => {
  const item = selectedItem.value;
  delAPI([item.id]).then((res) => {
    visible.value = false;
    store.getMsgData();
    ElMessage({
      type: "success",
      message: "删除成功",
    });
  });
};

const noticeType = ref({});
const noticeStatus = ref({});
const getMsg = () => {
  dicVals("notice_type").then((res) => {
    res.data.forEach((row) => {
      noticeType.value[row.value] = row.label;
    });
  });
  dicVals("notice_status").then((res) => {
    res.data.forEach((row) => {
      noticeStatus.value[row.value] = row.label;
    });
  });
};

onMounted(() => {
  // 在组件挂载后执行的代码
  getMsg();
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
